<script setup lang="ts">
import HeadButons from "./head/HeadButons.vue";
import AsideButons11 from "./aside/AsideButons11.vue";
import BodyButons22 from "./body/BodyButons22.vue";
import AsideButons22 from "./aside/AsideButons22.vue";
import BodyButons11 from "./body/BodyButons11.vue";
import {layoutStatus} from "../store/LayoutStatus.ts";

</script>
<template>
  <div class="pc-layout">
    <div class="header">
      <HeadButons/>
    </div>
    <div class="main-container">
      <div class="aside">
        <AsideButons11 v-if="layoutStatus().asideButons11vsble"/>
        <AsideButons22 v-if="layoutStatus().asideButons22vsble"/>
      </div>
      <div class="content-wrapper">
        <div class="body">
          <BodyButons11 v-if="layoutStatus().bodyButons11vsble"/>
          <BodyButons22 v-if="layoutStatus().bodyButons22vsble"/>
        </div>
        <div class="footer">
          footer
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 整体容器：占满屏幕高度，垂直排列 */
.pc-layout {
  display: flex;
  flex-direction: column;
  height: 90vh; /* 占满整个视口高度 */
  min-width: 1024px; /* PC端最小宽度限制 */
  overflow: hidden;
  color: #333;
  font-size: 14px;
}

/* 头部：固定高度，置顶 */
.header {
  height: 60px; /* 经典PC头部高度 */
  background-color: goldenrod;
  color: #fff;
  padding: 0 20px;
  display: flex;
  align-items: center; /* 内容垂直居中 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 底部阴影增强层次感 */
  z-index: 10; /* 避免被其他区域遮挡 */
}

/* 中间主体容器：水平排列，占满剩余高度 */
.main-container {
  display: flex;
  flex: 1; /* 占据剩余全部高度（100vh - 60px） */
  height: calc(100vh - 60px);
}

/* 侧边栏：固定宽度，左侧常驻 */
.aside {
  width: 220px; /* 经典PC侧边栏宽度 */
  background-color: darkseagreen;
  color: #ecf0f1;
  padding: 20px 0;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05); /* 右侧阴影区分内容区 */
  overflow-y: auto; /* 菜单过多时可滚动 */
}

/* 右侧内容容器：垂直排列，占满剩余宽度 */
.content-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1; /* 占据剩余全部宽度（100% - 220px） */
  background-color: #f5f7fa; /* 浅灰背景突出主内容 */
}

/* 主内容区：占满中间高度，可滚动 */
.body {
  flex: 1; /* 占据除底部外的全部高度 */
  padding: 20px;
  overflow-y: auto; /* 内容过多时纵向滚动 */
  background-color: #d5a8a8;
  color: #1c0202;
}

/* 底部：固定高度，置底 */
.footer {
  height: 50px; /* 经典PC底部高度 */
  background-color: darkcyan;
  color: white;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center; /* 内容水平居中 */
  border-top: 1px solid #4a6176;
}

</style>
